<template>
  <div>
    <Modal
      v-model="isShowModal"
      :title="title"
      @on-cancel="hide('formValidate')"
      :mask-closable="false"
      width="80vw"
    >
      <Form
        ref="formValidate"
        :model="params"
        :rules="ruleValidate"
        label-position="left"
        inline
      >
        <FormItem label="门店名称：" prop="poiName">
          <Input v-model.trim="params.poiName" placeholder="请输入门店名称" />
        </FormItem>
        <FormItem label="省市区:" prop="region">
          <Cascader
            :data="regionDataList"
            v-model="region"
            @on-change="regionChange"
            placeholder="请选择省市县"
          ></Cascader>
        </FormItem>
        <FormItem label="收件地址" prop="address">
          <Input v-model.trim="params.address" placeholder="请输入收件地址" />
        </FormItem>
        <FormItem label="收件联系人" prop="contact">
          <Input v-model.trim="params.contact" placeholder="请输入收件联系人" />
        </FormItem>
        <FormItem label="收件联系方式" prop="mobile">
          <Input
            v-model.trim="params.mobile"
            placeholder="请输入收件联系方式"
          />
        </FormItem>
        <FormItem label="月结账户" prop="monthlyCard">
          <Input
            v-model.trim="params.monthlyCard"
            placeholder="请输入月结账户"
          />
        </FormItem>
        <FormItem label="快递类型" prop="deliveryType">
          <Select
            v-model="params.deliveryType"
            placeholder="快递类型"
            clearable
            style="min-width: 150px;"       
          >
            <Option value="sf">顺丰</Option>
            <Option value="jd">京东</Option>
          </Select>
        </FormItem>
        <FormItem label="取件联系人" prop="sendContact">
          <Input
            v-model.trim="params.sendContact"
            placeholder="请输入取件联系人"
          />
        </FormItem>
        <FormItem label="取件联系方式" prop="sendMobile">
          <Input
            v-model.trim="params.sendMobile"
            placeholder="请输入取件联系方式"
          />
        </FormItem>
        <FormItem label="取件省市区:" prop="backRegion">
          <Cascader
            :data="regionDataList"
            v-model="backRegion"
            @on-change="regionChange"
            placeholder="请选择省市县"
          ></Cascader>
        </FormItem>
        <FormItem label="取件地址" prop="sendAddress">
          <Input
            v-model.trim="params.sendAddress"
            placeholder="请输入取件地址"
          />
        </FormItem>
        <FormItem label="寄回快递类型" prop="backDeliveryType">
          <Select
            v-model="params.backDeliveryType"
            placeholder="寄回快递类型"
            clearable
            style="min-width: 150px;"
          >
            <Option value="sf">顺丰</Option>
            <Option value="jd">京东</Option>
          </Select>
        </FormItem>
        <FormItem label="寄回月结账户" prop="backMonthlyCard">
          <Input
            v-model.trim="params.backMonthlyCard"
            placeholder="请输入寄回月结账户"
          />
        </FormItem>
        <FormItem label="应用KEY" prop="appKey">
          <Input v-model.trim="params.appKey" placeholder="请输入应用KEY" />
        </FormItem>
        <FormItem label="应用Secret" prop="appSecret">
          <Input
            v-model.trim="params.appSecret"
            placeholder="请输入应用Secret"
          />
        </FormItem>

        <FormItem label="是否使用" prop="isUse">
          <i-switch v-model="params.isUse">
            <template #open>
              <span>是</span>
            </template>
            <template #close>
              <span>否</span>
            </template>
          </i-switch>
        </FormItem>
      </Form>

      <!-- 重写对话框底部按钮 -->
      <div slot="footer">
        <Button @click="hide('formValidate')">取消</Button>
        <Button
          v-if="type != 1"
          type="primary"
          @click="handleSubmit('formValidate')"
          :loading="loadingBtn"
        >
          <span v-if="!loadingBtn">确定</span>
          <span v-else>请稍候...</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {
    platformList,
    companyList,
    serviceCodeList
  } from '@/constant/program';

  export default {
    name: 'factory-ope',
    data() {
      return {
        region: [],
        backRegion: [],
        companyList,
        serviceCodeList,
        platformList,
        isShowModal: false,
        loadingBtn: false,
        title: '门店信息',
        type: 0,
        action: this.$uploadURL,
        headers: {
          token: JSON.parse(sessionStorage.getItem('J-TOKEN')).token
        },

        params: {
          address: '',
          appKey: '',
          appSecret: '',
          backDeliveryType: '',
          backMonthlyCard: '',
          city: '',
          contact: '',
          county: '',
          deliveryType: '',
          factoryCode: '',
          id: '',
          isUse: true,
          mobile: '',
          monthlyCard: '',
          poiName: '',
          province: '',
          sendAddress: '',
          sendCity: '',
          sendContact: '',
          sendCounty: '',
          sendMobile: '',
          sendProvince: ''
        },
        ruleValidate: {
          platform: [
            { required: true, message: '平台不能为空', trigger: 'change' }
          ],
          programAppid: [
            { required: true, message: '门店ID不能为空', trigger: 'change' }
          ],
          programName: [
            { required: true, message: '门店名不能为空', trigger: 'change' }
          ]
        }
      };
    },
    methods: {
      regionChange(val) {
        console.log('region', val);
        setTimeout(() => {
          console.log(this.regionDetail);
        }, 200);
      },
      // 点击提交验证
      handleSubmit(name) {
        // console.log(this.params);
        this.$refs[name].validate(valid => {
          if (valid) {
            // this.$Message.error('验证通过');
            /**
             * type判断
             * 1.查看 2.新增 3.编辑
             */
            switch (this.type) {
              case 1:
                // this.title = '查看分类';
                break;
              case 2:
                // 新增分类
                this.addProgram();
                break;
              case 3:
                // 编辑分类
                this.updateMallGoodsType();
                break;
              default:
                this.$Notice.error({
                  title: '门店管理',
                  desc: '查看，新增，编辑区分判断报错',
                  duration: 0
                });
                break;
            }
          } else {
            this.$Message.error('还有信息没有填写合格哦~');
          }
        });
      },
      // 显示模态框
      show(type, row) {
        this.isShowModal = true;
        this.type = type;
        this.params = {
          address: '',
          appKey: '',
          appSecret: '',
          backDeliveryType: '',
          backMonthlyCard: '',
          city: '',
          contact: '',
          county: '',
          deliveryType: '',
          factoryCode: '',
          id: '',
          isUse: true,
          mobile: '',
          monthlyCard: '',
          poiName: '',
          province: '',
          sendAddress: '',
          sendCity: '',
          sendContact: '',
          sendCounty: ''
        };
        /**
         * type判断
         * 1.查看 2.新增 3.编辑
         */
        switch (type) {
          case 1:
            this.title = '查看';
            this.queryProgramInfo(row);
            break;
          case 2:
            this.title = '新增';
            break;
          case 3:
            this.title = '编辑';
            this.queryProgramInfo(row);
            break;
          default:
            this.$Notice.error({
              title: '门店管理',
              desc: '查看，新增，编辑模态框报错',
              duration: 0
            });
            break;
        }
      },
      // 新增
      addProgram() {
        this.$Spin.show();
        const regionNameList = this.getRegionNameList(this.getRegionDetail(this.region));
        const backRegionNameList = this.getRegionNameList(this.getRegionDetail(this.backRegion));
        const params = {
          ...this.params,
          isUse: this.params.isUse == true ? 1 : 0,
          province: regionNameList[0],
          city: regionNameList[1],
          county: regionNameList[2],
          sendProvince: backRegionNameList[0],
          sendCity: backRegionNameList[1],
          sendCounty: backRegionNameList[2]
        };
        this.axios.post('/factory/addFactory', params).then(res => {
          if (res.status == 200) {
            this.$emit('changeDate');
            this.$Message.success('操作成功.');
            this.hide('formValidate');
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '新增门店接口报错',
              duration: 0
            });
          }
        }).finally(() => {
          this.$Spin.hide();
        })
      },
      // 编辑分类
      updateMallGoodsType() {
        this.$Spin.show();
        this.axios.post('/program/updateProgram', this.params).then(res => {
          setTimeout(() => {
            this.$Spin.hide();
          }, 300);
          if (res.status == 200) {
            this.$emit('changeDate');
            this.$Message.success('操作成功.');
            this.hide('formValidate');
          }
          if (res.status == 201) {
            this.$Message.error(res.msg);
          }
          if (res.status == 500) {
            this.$Notice.error({
              title: '服务器内部错误',
              desc: '编辑门店接口报错',
              duration: 0
            });
          }
        });
      },
      // 查询分类详情
      queryProgramInfo(row) {
        this.$Spin.show();
        console.log(row);
        this.axios
          .get('/program/findInfo', {
            params: {
              programId: row.programId
            }
          })
          .then(res => {
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.params = res.data;
              this.params.platform = res.data.platform.toString();
              console.log(res.data);
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查看分类详情接口报错',
                duration: 0
              });
            }
          });
      },

      // 关闭模态框
      hide(name) {
        this.isShowModal = false;
        this.params.goodsMallTypeId = '';

        this.$refs[name].resetFields();
      }
    }
  };
</script>

<style scoped></style>
